<template>
  <div id="chart" ref="chart" style="position:absolute;left: 30px;top: 20px"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);
const drawShape = () => {
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      const WIDTH = 15;
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p2 = [basicsXAxis - WIDTH, bottomYAxis];
      const p3 = [basicsXAxis, bottomYAxis];
      const p4 = [basicsXAxis, topBasicsYAxis];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });

  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      const WIDTH = 15;
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis, bottomYAxis];
      const p3 = [basicsXAxis + WIDTH, bottomYAxis];
      const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });

  const topShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, basicsXAxis } = shape;
      const WIDTH = 15;
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
      const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });

  echarts.graphic.registerShape("leftShape", leftShape);
  echarts.graphic.registerShape("rightShape", rightShape);
  echarts.graphic.registerShape("topShape", topShape);
  
  initChart();
}

const initChart = () => {
  const myChart = echarts.init(chart.value);
  myChart.setOption({
    title: {
      text: '',
      left: 'center',
      textStyle: {
        fontSize: 14,
      },
    },
    xAxis: {
      type: "category",
      type: "category",
      data: [
        '国家政策跟踪审计',
        '财务收支审计',
        '固定资产投资审计',
        '内部控制和风险管理审计',
        '经济责任审计',
        '信息系统审计',
        '非经费其他',
      ],      
      // axisLabel: {
      //   rotate: 0, // 不旋转，保持横排显示
      //   color: "#222",
      //   fontSize: 11,
      //   width: 70, // 控制每个标签的最大宽度
      //   overflow: 'break', // 文字超出时自动折行
      //   lineHeight: 14, // 设置行高以控制折行后的行距
      // },
      axisLabel: {
        rotate: 0, // 横排显示
        color: "#222",
        fontSize: 11,
        width: 70, // 增加宽度确保标签可以显示完整或部分文字
        overflow: 'break', // 超出宽度时显示省略号
        lineHeight: 14,
        interval: 0, // 显示每个标签
      },
    },
    yAxis: {
      type: "value",
      interval: 20, // Y-axis step size
      axisLabel: {
        color: "#222",
      },
      splitLine: {
        show: false, // Remove grid lines
      },
      name: '单位：(个)', // Y-axis unit label
      nameLocation: 'middle', // Position the unit label in the middle of the axis
      nameGap: 35, // Distance between the axis and the name
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: function (params) {
              const colors = [
                ['#66cc66', '#b2e8b2'],
                ['#66ccff', '#b2e8ff'],
                ['#cc99ff', '#e0c2ff'],
                ['#ff9933', '#ffd4a1'],
                ['#ff6666', '#ffb3b3'],
                ['#ffcc33', '#ffe5a1'],
                ['#3399ff', '#99ccff'],
              ];
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[params.dataIndex][0] },
                { offset: 1, color: colors[params.dataIndex][1] },
              ]);
            },
          },
        },
        label: {
          show: true,
          position: 'top',
          fontSize: 12,
          color: '#333',
        },
      },
      {
        type: "custom",
        data: [110, 90, 100, 100, 100, 100, 100],
        barWidth: '45%',
        renderItem(params, api) {
          const basicsCoord = api.coord([api.value(0), api.value(1)]);
          const topBasicsYAxis = basicsCoord[1];
          const basicsXAxis = basicsCoord[0];
          const bottomYAxis = api.coord([api.value(0), 0])[1];

          const gradientColors = [
            ['#66cc66', '#b2e8b2'],
            ['#66ccff', '#b2e8ff'],
            ['#cc99ff', '#e0c2ff'],
            ['#ff9933', '#ffd4a1'],
            ['#ff6666', '#ffb3b3'],
            ['#ffcc33', '#ffe5a1'],
            ['#3399ff', '#99ccff'],
          ];

          return {
            type: "group",
            children: [
              {
                type: "leftShape",
                shape: {
                  topBasicsYAxis,
                  basicsXAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: gradientColors[params.dataIndex][0] },
                    { offset: 0.3, color: gradientColors[params.dataIndex][1] },
                  ]),
                  emphasis: {
                    fill: 'yellow',
                  },
                },
              },
              {
                type: "rightShape",
                shape: {
                  topBasicsYAxis,
                  basicsXAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: gradientColors[params.dataIndex][0] },
                    { offset: 1, color: gradientColors[params.dataIndex][1] },
                  ]),
                },
              },
              {
                type: "topShape",
                shape: {
                  topBasicsYAxis,
                  basicsXAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: gradientColors[params.dataIndex][0] },
                    { offset: 1, color: gradientColors[params.dataIndex][1] },
                  ]),
                },
              },
            ],
          };
        },
      },
    ],
  });
}

onMounted(() => {
  drawShape();
});
</script>

<style>
#chart {
  width: 100%; /* 让图表自适应父级容器 */
}

</style>
